import Page from './Page'
import {Rail, CrhEnd, CrhFirst, CrhMiddle, Stone, Sun, Cloud, Build, Tunnel, Box, changeSpeed as Speed} from "./DataBus"

export class PageMain extends Page {
  constructor(_this) {
    super(_this);
    this.rail = [];
    this.crh_middle = [];
    this.stone = [];
    this.cloud = [];
    this.build = [];
    this.tunnel = [];
    this.sun = null;
    this.crh_first = null;
    this.box = new Box(0);
    this.fps = 0;
    this.speed = 1;
    this.start = false;
    this.init();
  }

  init() {
    let zoom = 1;
    //初始化背景
    //太阳
    zoom = 2;
    this.sun = new Sun({
      x: this.width - 50,
      y: 20,
      item: this.pl.getItem('sun'),
      zoom: zoom
    });
    //云彩
    let limit = Math.random() * 10 + 10;
    for (let i = 0; i < limit; i++) {
      this.cloud[i] = new Cloud({
        x: (this.width + 200) * Math.random(),
        y: 5 + Math.random() * 50,
        item: this.pl.getItem('cloud_0' + Math.floor(4 * Math.random() + 1)),
        zoom: zoom
      })
    }
    limit = Math.random() * 100 + 100;
    //建筑
    zoom = 1.2;
    for (let i = 0; i < limit; i++) {
      let type = Math.floor(1 + Math.random() * 4);
      let builds = this.pl.getItem('build_0' + type);
      this.build[i] = new Build({
        x: (this.width + 1000) * Math.random(),
        y: this.height * 0.6 - builds.getHeight() * zoom,
        item: builds,
        zoom: zoom
      })
    }
    //初始化石子
    let stones = this.pl.getItem('stone');
    let stonenum = 100;
    let stonep = 4;
    let k = 0;
    zoom = 1;
    for (let i = 0; i < stonenum / stonep; i++) {
      for (let j = 0; j < stonep; j++) {
        this.stone[k++] = new Stone({
          x: (this.width + 100) / stonenum * stonep * i + (10 * Math.random() - 5),
          y: this.height * 0.6 - 10 + j * 10 * Math.random(),
          item: stones,
          zoom: zoom
        });
      }
    }

    //初始化铁轨
    let rails = this.pl.getItem('railway');
    let railnum = this.width / rails.getWidth() + 4;
    zoom = 0.8;
    for (let i = 0; i < railnum; i++) {
      this.rail[i] = new Rail({
        x: i * rails.getWidth() * zoom,
        y: this.height * 0.6,
        item: rails,
        zoom: zoom
      });
    }

    //初始化列车
    let crh_middles = this.pl.getItem('crh_middle');
    let i = 0;
    zoom = 0.4;
    for (; i < 3; i++) {
      this.crh_middle[i] = new CrhMiddle({
        x: i * crh_middles.getWidth() * zoom - 80,
        y: this.height * 0.6 - crh_middles.getHeight() * zoom + 5,
        item: crh_middles,
        zoom: zoom
      })
    }
    let _crh_first = this.pl.getItem('crh_first');
    this.crh_first = new CrhFirst({
      x: i * crh_middles.getWidth() * zoom - 80,
      y: this.height * 0.6 - crh_middles.getHeight() * zoom + 5,
      item: _crh_first,
      zoom: zoom
    });

    //初始化隧道
    zoom = 2.5;
    let tunnel_left = this.pl.getItem('tunnel_left');
    this.tunnel[0] = new Tunnel({
      x: this.width,
      y: this.height * 0.6 - tunnel_left.getHeight() * zoom + 55,
      item: tunnel_left,
      zoom: zoom
    });
    let tunnel_right = this.pl.getItem('tunnel_right');
    this.tunnel[1] = new Tunnel({
      x: this.width + (tunnel_left.getWidth() - 62) * zoom,
      y: this.height * 0.6 - tunnel_right.getHeight() * zoom + 55,
      item: tunnel_right,
      zoom: zoom
    });

  }

  display() {
    let speed;
    //绘制标题
    if (this.speed > 30) {
      this.ctx.font = '30px 幼圆';
      let gradient = this.ctx.createLinearGradient(0, 0, this.canvas.width, 0);
      gradient.addColorStop("0", "black");
      gradient.addColorStop("0.5", "grey");
      gradient.addColorStop("1.0", "black");
      this.ctx.fillStyle = gradient;
      this.ctx.fillText('单击屏幕开始', document.documentElement.clientWidth / 2 - 90, document.documentElement.clientHeight / 2 - 10);
    }
    //绘制太阳
    this.ctx.drawImage(this.sun.getPic(), this.sun.getX(), this.sun.getY(), this.sun.getWidth(), this.sun.getHeight());
    //绘制云朵
    speed = Speed(this.speed / 20);

    this.cloud.forEach((item, i) => {
      this.ctx.globalAlpha = item.getAlpha();
      this.ctx.drawImage(item.getPic(), item.getX(), item.getY(), item.getWidth(), item.getHeight());
      item.setX(item.getX() - speed);
      if (item.getX() + item.getWidth() < 0) {
        item.setX(this.width + 5 * Math.random() - 2.5);
        let ram = item.getY() + 50 * Math.random() - 25;
        if (ram < 5) ram = 5;
        if (ram > 55) ram = 55;
        item.setAlpha();
        item.setY(ram)
      }
    });
    speed = Speed(this.speed);
    //绘制建筑物
    this.build.forEach((item, i) => {
      this.ctx.globalAlpha = item.getAlpha();
      this.ctx.drawImage(item.getPic(), item.getX(), item.getY(), item.getWidth(), item.getHeight());
      item.setX(item.getX() - speed);
      if (item.getX() + item.getWidth() < 0) {
        // item.delete();
        this.build.splice(i, 1);
      }
    });
    this.ctx.globalAlpha = 1;
    //绘制左隧道
    if (this.start) {
      this.ctx.drawImage(
        this.tunnel[0].getPic(),
        this.tunnel[0].getX(),
        this.tunnel[0].getY(),
        this.tunnel[0].getWidth(),
        this.tunnel[0].getHeight()
      );
      this.tunnel[0].setX(this.tunnel[0].getX() - speed);
    }
    //绘制石子
    this.stone.forEach((item, i) => {
      this.ctx.drawImage(item.getPic(), item.getX(), item.getY(), item.getWidth(), item.getHeight());
      item.setX(item.getX() - speed);
      if (item.getX() + item.getWidth() < 0) {
        item.setX(this.width + 5 * Math.random() - 2.5);
        let ram = item.getY() + 5 * Math.random() - 2.5;
        if (ram < this.height * 0.6 - 10) ram = this.height * 0.6 - 10;
        if (ram > this.height * 0.6 + 15) ram = this.height * 0.6 + 15;
        item.setY(ram)
      }
    });

    //绘制轨道
    this.rail.forEach((item, i) => {
      this.ctx.drawImage(item.getPic(), item.getX(), item.getY(), item.getWidth(), item.getHeight());
      item.setX(item.getX() - speed);
      if (item.getX() + item.getWidth() < 0) {
        let max = 0;
        this.rail.forEach((temp, j) => {
          if (temp.getX() > max) max = temp.getX();
        });
        item.setX(max + item.getWidth() - speed);
      }
    });

    //绘制列车
    let tempX = Math.sin(this.fps++ / 250 * Math.PI) * 30;
    this.crh_middle.forEach((item, i) => {
      if (Math.random() > 0.9 || item.getJump()) {
        item.bang();
      }
      this.ctx.drawImage(item.getPic(), item.getX() + tempX, item.getY(), item.getWidth(), item.getHeight());
    });
    if (Math.random() > 0.9 || this.crh_first.getJump()) {
      this.crh_first.bang();
    }
    this.ctx.drawImage(
      this.crh_first.getPic(),
      this.crh_first.getX() + tempX, this.crh_first.getY(),
      this.crh_first.getWidth(),
      this.crh_first.getHeight()
    );
    //绘制右隧道
    if (this.start) {
      this.ctx.drawImage(
        this.tunnel[1].getPic(),
        this.tunnel[1].getX(),
        this.tunnel[1].getY(),
        this.tunnel[1].getWidth(),
        this.tunnel[1].getHeight()
      );
      this.tunnel[1].setX(this.tunnel[1].getX() - speed);
    }
    //绘制渐变
    if (this.start) {
      this.box.paint(this);

      this.box.addAlpha(0.01);
      if (this.box.getAlpha() > 1) this.that.mode = 'game';
    }

    //加速！
    if (this.speed < 50 && !this.start) this.speed += 0.5;
    //减速！
    if (this.speed > 0 && this.start) this.speed -= 0.5;
  }

  gamestart() {
    if (this.speed > 30) {
      this.start = true;
    }
  }
}
